// 组件

<template>
  <div>
    <h2>Demo - Demo -Demo</h2>
    <p @click="changeCount">count---{{ count }}</p>
    <p>完整的语法高亮</p>
    <p>CommonJS 模块</p>
    <p>组件作用域的CSS (secoped)</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 2105,
    };
  },
  methods: {
    changeCount() {
      this.count++;
    },
  },
  mounted() {},
  components: {},
};
</script>

// 加scoped后不会css穿透 
<style scoped>
h2 {
  color: red;
}
p {
  color: yellowgreen;
}
</style>